<template>
	<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">

		<!-- 分割线 -->
		<view style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"></view>

		<!-- 服务项目 -->
		<view style="width: 702rpx;margin-top: 19rpx;">
			<!-- 标题 -->
			<text style="font-size: 30rpx;color: #333333;align-self: flex-start;">预约项目</text>
			<!-- 分割线 -->
			<view style="width: 100%;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
			
			<!-- 服务项目多选框 -->
			<checkbox-group @change="checkboxChange" style="margin-top: 20rpx;">
				<label style="width: 100%; display: flex;justify-content: space-between;align-items: center; margin-top: 30rpx;"
				 v-for="(item,index) in allList" :key="item.value">
					<view style="font-size: 28rpx;color: #666666;">{{item.name}}</view>
					<view>
						<checkbox :value="item.value" :checked="item.checked" style="transform: scale(0.8);" />
					</view>
				</label>
			</checkbox-group>
		</view>

		<!-- 分割线 -->
		<view style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"></view>

		<!-- 上传照片 	标题 	上传照片 -->
		<view style="width: 702rpx;margin-top: 19rpx;">
			<text style="font-size: 30rpx;color: #333333;align-self: flex-start;">上传照片</text>
			<view style="width: 702rpx; display: flex;flex-direction: row; flex-wrap: wrap;margin-top: 20rpx;">
				<sunui-upoos :upImgConfig="upImgOos" @onUpImg="upOosData" @onImgDel="delImgInfo" ref="uImage"></sunui-upoos>
			</view>
		</view>
		
		<!-- 分割线 -->
		<view style="width: 100%; height: 10rpx;background-color: #F7F8FF;margin-top: 20rpx;"></view>
		<!-- 价格 -->
		<view style="width: 702rpx;margin-top: 20rpx;font-size: 28rpx;color: #333333;">
			<view style="display: flex;justify-content: space-between;">
				<text>应收金额:</text>
				<text>￥369.00</text>
			</view>
			<view style="width: 100%;height: 1px;background-color: #F7F8FF;margin-top: 20rpx;"></view>
			<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
				<text>实收金额:</text>
				<input style="text-align: end;" placeholder="输入金额" @input="inputKey"  v-model="inputKeyData" type="digit"/>
			</view>
		</view>
		<view style="width: 1;height: 120rpx;"></view>
		
		<!-- 核销按钮 -->
		<view v-on:click="putData" style="width: 100%;height: 80rpx; position: fixed;bottom: 0px;align-self: center;text-align: center;background-color: #4B9EFF;
		font-size: 26rpx;color: #FFFFFF;line-height: 80rpx;">确认核销</view>

	</view>
</template>

<script>
	// crypto     
	import crypto from 'crypto-js'
	// import md5 from 'js-md5' //可以用，但不用这个，不大气
	import sunuiupoos from '../../components/sunui-upimg/sunui-upimg-alioos.vue';
	export default {
		components: {
			sunuiupoos
		},
		data() {
			return {
				oosArr: [],
				arrimages:'',//md5
				// 阿里云oos相关配置
				upImgOos: {
					aliConfig: {
						// 阿里云oos上传key_secret(后端传)
						AccessKeySecret: 'TVKmZwal3et1EB2crRxE7kkN3Ot1hi',
						// 阿里云oos上传key_id(后端传)
						OSSAccessKeyId: 'LTAI4FdZvrK1VrSJAQKYQRi6',
						// 阿里云oos上传目录(必须存在)
						oosDirectory: 'uniapp',
						// 阿里云上传url
						url: 'http://qichefuwu.oss-cn-chengdu.aliyuncs.com/'
					},
					// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
					notli: true,
					// 图片数量
					count: 4,
					// 上传图片背景修改 
					upBgColor: '#F7F8FF',
					// 上传icon图标颜色修改(仅限于iconfont)
					upIconColor: '#666666',
					// 上传svg图标名称
					upSvgIconName: 'icon-certificate'
				},
				inputKeyData:"",
				allList: [
					// {
					// 	value: 1,
					// 	name: '空调清洗',
					// 	checked: false
					// },
					// {
					// 	value: 2,
					// 	name: '机油更换',
					// 	checked: false
					// },
					// {
					// 	value: 3,
					// 	name: '抛光打蜡',
					// 	checked: false
					// },
					// {
					// 	value: 4,
					// 	name: '发动机清洗',
					// 	checked: false
					// }
				],
				appointmentList: [1, 2],
				srcList:[],	//服务列表（测试）
				orderlistitem:''	,//订单数据
				// 已选择的预约条目
				sugoodId:[]
			}
		},
		onLoad() {
			this.orderlistitem = this.$Route.query.item; //携带的订单数据
			//初始化数据
			this.getData();
		},
		methods: {
						
			//获取平台预约信息和用户预约信息
			async getData(){
				let res;
				try {
					res = await this.$request.get('addons/shopro/goods/lists',{
						data: {
							category_id: 2, //1是汽车，2是服务
							page: 1,
							// category_id:id
						}
					});
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					return uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
				console.log('allList===请求看车，服务类数据',res.data.data.data);
				
				// this.allList = res.data.data.data;
				this.srcList = res.data.data.data;
				//因为后端数据不能直接用于多选控件，所以把allList的数据初始化用于多选控件的渲染
				// for(let i = 0, len = this.srcList.length;i < len; i++){
				// 	this.allList.push({
				// 		value: this.srcList[i].id,
				// 		name: this.srcList[i].title,
				// 		checked: false
				// 	});
				// }
				this.srcList.forEach((item,index) => {
					this.allList.push({
						value:item.id,
						name:item.title,
						checked:false
					})
				})
				console.log('this.allList :数据重组--二次渲染>> ', this.allList);
				//获取用户订单数据
				let userRes;
				try{
					 userRes = await this.$request.get('addons/shopro/staff/detail',{
						data:{
							order_sn:this.orderlistitem.order_sn,
							id:this.orderlistitem.id,
						}
					})
					// this.
				}catch(e){
					console.log("e: ",e);
					//TODO handle the exception
					return uni.showToast({
						title:'网络连接失败',
						icon:'none'
					});
				}
				// 获取图片
				// let imageArr;
				// try{
				// 	 imageArr = await this.$request.post('addons/alioss/index/params',{
				// 		 data:{
				// 			 md5:'898cdc306a5fc061b3824e7c0ab862c8',
				// 			 name:'03-hennessey-25th-anniv-mustang.jpg',
				// 			 aliosstoken:'LTAI4FdZvrK1VrSJAQKYQRi6:3Knnlenapt1GlL6KWCXSaaOPk8k=:eyJkZWFkbGluZSI6MTYxMzYzMTc4OX0='
				// 		 }
				// 	})
				// }catch(e){
				// 	console.log("e: ",e);
				// 	//TODO handle the exception
				// 	return uni.showToast({
				// 		title:'网络连接失败',
				// 		icon:'none'
				// 	});
				// }
				// console.log("resuserRes 图片地址============",imageArr);
				
				//保存已预约的数据
				this.appointmentList = userRes.data.data.item;
				
				// 后端传来用户已经预约的服务(数组appointmentList)==
				// 将已预约的服务与全部服务进行对比,把已预约的标记为已勾选
				for (let i = 0, appointmentListLen = this.appointmentList.length; i < appointmentListLen; i++) {
					//与全部服务进行对比
					for (let n = 0, allListLen = this.allList.length; n < allListLen; n++) {
						// 逐个对比,将已预约的设置为已勾选状态
						console.log('goodid', this.appointmentList[i].goods_id);
						if (this.allList[n].value == this.appointmentList[i].goods_id) {
							this.allList[n].checked = true;
							this.sugoodId.push(this.allList[n].value);
						}
					}
				}
				
				console.log(this.sugoodId);
				
			},
			// putData(){
					// ...reRes;
			// },
			async putData(){
				if (!this.inputKeyData) return uni.$showMsg('请填写实收金额！');
				var reRes = [];
				console.log('xx',this.srcList);
				for(var i = 0,len = this.sugoodId.length; i<len; i++){
					
					for(var si = 0,slen = this.srcList.length;si<slen;si++){
						
						if(this.srcList[si].id == this.sugoodId[i]){
							// reRes.push(this.srcList[si]);
							reRes.push({
								goods_id:this.srcList[si].id,
								goods_num:1,
								sku_price_id:0,
								goods_price:this.srcList[si].price
							});
						};
					}
				}
				console.log('reRes****************',reRes);
				this.get(reRes)
				// this.$Router.push({
				// 	name:'orderList'
				// })
			},
			async get(reRes){
				// coupons_id优惠劵id
				// console.log('reRes :>> ', reRes);
				// 接口返回
				var res
				try {
					res = await this.$request.post('addons/shopro/staff/writeoff',{
						// coupons_id:this.orderlistitem.coupons_id,
						data:{goods_list: reRes,order_id:this.orderlistitem.id,coupons_id:0,
						hexiao_fee:this.inputKeyData,
						order_imge:this.oosArr}
					});
					let _this = this;
					uni.showModal({
						title:'订单状态',
						content:res.data.msg,
						success: function (res) {
							if (res.confirm) {
								setTimeout(() => {
									// if(res.data.code == 0) {
										_this.$Router.pushTab({
											name:'my'
										})
									// }
								},1000)
							} else if (res.cancel) {
								setTimeout(() => {
									// if(res.data.code == 0) {
										_this.$Router.pushTab({
											name:'my'
										})
									// }
								},1000)
							}
						}
					});
				} catch (e) {
					//TODO handle the exception
					console.log('e===', e);
					uni.showToast({
						title: '网络连接失败！',
						icon: 'none'
					});
				}
			},
			// 预约项目的多选框状态改变触发
			checkboxChange: function(e) {
				// console.log(e.detail.value);
				//保存选择状态
				this.sugoodId = e.detail.value;
			},
			// 输入实收金额的时候触发
			inputKey(e){
				console.log(e.target.value);
			},
			// 阿里云部分
			uImageTap() {
				console.log(this.upImgOos)
				this.$refs.uImage.uploadimage(this.upImgOos);
			},
			// 删除图片 -2019/05/12(本地图片进行删除)
			async delImgInfo(e) {
				console.log('你删除的图片地址为:', e, this.oosArr.splice(e.index, 1));
			},
			// 阿里云
			async upOosData(e) {
				console.log('222222 :>> ', 222222);
				// 上传图片数组
				console.log("e: ",e);
				let arrImg = [];
				for (let i = 0, len = e.length; i < len; i++) {
					try {
						if (e[i].path_server != "") {
							await arrImg.push(e[i].path_server.split(','));
						}
					} catch (err) {
						console.log('上传失败...');
					}
				}
				// 图片信息保存到data数组
				let arrimages = [];
				arrImg.forEach((item,index) => {
					var a_ = item.join('-'),b_ = crypto.MD5(a_).toString();
					arrimages.push(b_)
				})
				// console.log("this.arrimages = '': ",arrimages);
				this.oosArr = arrimages;

				// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
				if (arrImg.length == this.upImgOos.count) {
					uni.showToast({
						title: `上传成功`,
						icon: 'none'
					});
				}
			},
			// 获取上传图片阿里云
			getUpImgInfoOos() {
				console.log('阿里云转成一维数组:', this.oosArr.join().split(','));
			}
			// 阿里云部分结束
		}
	}
</script>

<style>

</style>
